'use client';
import React, { useContext, useRef, useEffect } from "react";
import { ThemeContext } from "../../context/ThemeContext";
import styles from "./page.module.css";

const ToggleThemeButton = () => {
  const { toggle, mode } = useContext(ThemeContext);
  const isHydrated = useRef(false);

  // 标记客户端 hydration 完成
  useEffect(() => {
    isHydrated.current = true;
  }, []);

  // 初始样式用服务端默认的 dark，hydration 后再用实际 mode
  const ballStyle = isHydrated.current 
    ? (mode === "light" ? { left: "2px" } : { right: "2px" })
    : { right: "2px" }; // 服务端默认 dark 的样式

  return (
    <div className={styles.container} onClick={toggle}>
      <div className={styles.icon}>🌙</div>
      <div className={styles.icon}>🔆</div>
      <div className={styles.ball} style={ballStyle} />
    </div>
  );
};

export default ToggleThemeButton;